import { ArrowRightIcon } from "@radix-ui/react-icons";
import { ComponentPropsWithoutRef, ReactNode } from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface BentoGridProps extends ComponentPropsWithoutRef<"div"> {
  children: ReactNode;
  className?: string;
}

interface BentoCardProps extends ComponentPropsWithoutRef<"div"> {
  header?: string;
  className?: string;
  description: string;
  Icon?: React.ElementType;
  name?: string;
  background?: ReactNode;
  href?: string;
  cta?: string;
}

const BentoGrid = ({ children, className, ...props }: BentoGridProps) => {
  return (
    <div
      className={cn(
        "grid w-full auto-rows-[22rem] grid-cols-3 gap-4",
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
};

const BentoCard = ({
  header,
  className,
  description,
  Icon,
  name,
  background,
  href,
  cta,
  ...props
}: BentoCardProps) => (
  <div
    className={cn(
      "group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl p-6",
      "bg-background/50 backdrop-blur-sm border border-white/10",
      className,
    )}
    {...props}
  >
    <div>
      {background}
      {Icon && <Icon className="size-8 mb-3 text-white/60" />}
      <h3 className="text-xl font-semibold text-white mb-2">
        {header || name}
      </h3>
      <p className="text-white/60">{description}</p>
    </div>
  </div>
);

export { BentoCard, BentoGrid };
